<template>
	<div id="detail">
		<div  class="left" @click="clickImg()">
				<img src="../../assets/img/common/fh.png" >
			</div>
			<div  class="center">
				<div v-for="(item,index) in title" :key=item.title :class="{active:index === titleNum}" @click="clickActive(index)" id="sp"><span>{{item}}</span></div>
			</div>
		<swiper>
			<swiper-item v-for="(item,index) in imgs" :key=item.title class="img">
				<a href="#" v-if="index == 0">
					<img src="../../assets/img/detail/xqy1.png" >
				</a>
				<a href="#" v-else-if="index == 1">
					<img src="../../assets/img/detail/zqy2.png" >
				</a>
				<a href="#" v-else-if="index == 2">
					<img src="../../assets/img/detail/xqy3.png" >
				</a>
			</swiper-item>
		</swiper>
		<div id="">
			<p>床垫软垫家用薄款垫子学生宿舍单人垫被褥子双人折叠保护垫床褥</p>
			<p><span>￥398.00-858.00</span></p>
			
		</div>
		<div id="p1">
			<p>
				<span>销量686</span>
				<span class="sc">收藏246人</span>
				<span class="fh">72小时发货</span>
			</p>
			
		</div>
		<div id="p2">
			<img src="../../assets/img/detail/xq.png" >
			<img src="../../assets/img/detail/hp1.png" >
			<img src="../../assets/img/detail/hp2.png" >
			<img src="../../assets/img/detail/hp3.png" >
			<img src="../../assets/img/detail/hp4.png" >
			<img src="../../assets/img/detail/hp5.png" >
			<img src="../../assets/img/detail/hp6.png" >
			<img src="../../assets/img/detail/hp8.png" >
			<img src="../../assets/img/detail/hp9.png" >
			<img src="../../assets/img/detail/hp10.png" >
			
		</div>
		<back-top class="back"></back-top>
		<br>
		<div id="comp">
			<p>用户评论<span>更多</span></p>
			<a href="#"><img src="../../assets/img/common/yx3.png" >棒棒糖</a>
			<p>刚好合适，物美廉价，衣服面料好，穿着很舒服，版型也很好，发出棒</p>
			<img src="../../assets/img/common/sp11.png" >
			<p class="pl">14818  颜色  上衣+裤子  尺码 M</p>
			
			<a href="#"><img src="../../assets/img/common/yx4.png" >cnagh</a>
			<p>刚好合适，物美廉价，衣服面料好，穿着很舒服，版型也很好，发出棒</p>
			<img src="../../assets/img/common/sp12.png" >
			<p class="pl">14818  颜色  上衣+裤子  尺码 M</p>
			<br>
		</div>
		<div class="style">
			<img src="../../assets/img/common/sp5.png">
			<p>拖鞋</p>
			<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
		</div>
		<div class="style">
			<img src="../../assets/img/common/sp6.png">
			<p>拖鞋</p>
			<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
		</div>
		<div class="style">
			<img src="../../assets/img/common/sp7.png">
			<p>拖鞋</p>
			<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
		</div>
		<div class="style">
			<img src="../../assets/img/common/sp8.png">
			<p>拖鞋</p>
			<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
		</div>
		<div class="style">
			<img src="../../assets/img/common/sp5.png">
			<p>拖鞋</p>
			<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
		</div>
		<div class="style" style="margin-bottom: ;">
			<img src="../../assets/img/common/sp6.png">
			<p>拖鞋</p>
			<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
		</div>
		<!-- 实现在按钮组件中发送过来的事件 -->
		<detail-bottom-bar @clickadd="clickAdd"></detail-bottom-bar>
		<p style="text-align: center;" @click="clickGd">加载更多.....</p>
		<ul>
		</ul>
	</div>
</template>

<script>
	import {Swiper,SwiperItem} from '../../components/common/swiper'
	import BackTop from '../../components/conent/BackTop.vue'
	import DetailBottomBar from './DetailBottomBar.vue'
	export default{
		name:'Detail',
		components:{
			
			Swiper,
			SwiperItem,
			BackTop,
			DetailBottomBar
		},
		data(){
			return{
				title:['商品','参数','评论','推荐'],
				titleNum:0,
				imgs:[
					"../../assets/img/detail/xqy1.png",
					"../../assets/img/detail/xqy2.png",
					"../../assets/img/detail/xqy3.png"
				],
				themeTopY:[0,1000,2000,3000]
			}
		},
		methods:{
			clickImg(){
				this.$router.push('/home')
			},
			clickGd(){
				alert('网络出错了！')
			},
			clickAdd(){//
				this.$router.push('/cart')
				
			},
			clickActive(index){
				this.titleNum = index
				/* this.$emit('clickTitle',index)//发出一个事件  然后我们在首页进行监听 */
				/* console.log(index) */
/* 				this.$refs.scroll.scrollTop(0,-this.themeTopY[index],100)
 */				
				if(index == 0){
					document.body.scrollTop = 1000 ;
					document.documentElement.scrollTop = 1000;
				} else if(index == 1){
					document.body.scrollTop = 500 ;
					document.documentElement.scrollTop = 500;
				} else if(index == 2){
					document.body.scrollTop = 4700 ;
					document.documentElement.scrollTop = 4700;
				} else if(index == 3){
					document.body.scrollTop = 5600 ;
					document.documentElement.scrollTop = 5600;
				}
				
			}
		}
	}
</script>

<style scoped="scoped">
	.left img{
		width: 30px;
		height: 30px;
		padding-right: 30px;
		padding-top: 5px;
	}
	.center{
		display: flex;
	}
	#sp{
		flex: 1;
	}
	.active{
		color: red;
	}
	.active span{
		border-bottom: solid 3px red;
	}
	.img img{
		width: 650px;
		height: 400px;
	}
	p{
		font-size: 18px;
		font-weight: 400;
		color: #000000;
	}
	p span {
		color: red;
	}
	.style span img{
		padding-left: 10px;
		width: 30px;
		height: 30px;
		
	}
	.style{
		text-align: center;
		float: left;
		margin-left: 5px;
	}
	.style span{
		color: red;
		padding-top: 5px;
	}
	.style img{
		width: 260px;
		height: 260px;
	}
	#p1 p span{
		color: #666666;
		
	}
	#p1 p .sc,.fh{
		
		padding-left: 140px;
	}
	#p1{
		border-bottom: #444444 solid 1px;
		text-shadow: #000000;
	}
	#p2 img{
		width: 590px;
		height: 400px;
	}
	ul{
		height: 50px;
	}
	.back{
		padding-right: 30px;
	}
	#comp p span{
		color: #000000;
		padding-left: 420px;
	}
	#comp a img{
		width: 50px;
		height: 50px;
	}
	#comp a{
		text-decoration: none;
		font-size: 20px;
		padding-left: 5px;
	}
	#comp {
		background-color: #D3D3D3;
	}
	#comp .pl{
		color: beige;
	}
	#comp{
		margin-bottom: 20px;
	}
</style>
